<template>
    <el-form :model="forms" label-width="auto" :rules="rules" ref="formsRef" v-if="env.value==='dev'">
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="数据库类型" prop="type">
                    <el-select
                            v-model="forms.type"
                            placeholder="请选择数据库类"
                    >
                        <el-option
                                v-for="item in dictionary.dbType"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                        />
                    </el-select>
                    <span class="zc-description">不同环境支持不同的数据库类型。</span>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="数据库名" prop="name">
                    <el-input v-model="forms.name"/>
                    <span class="zc-description">{{ env.label }}数据库名称最好_{{ env.value }}结尾来区分。</span>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="数据库地址" prop="host">
                    <el-input v-model="forms.host"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="数据库端口" prop="port">
                    <el-input v-model="forms.port"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="forms.username"/>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="密码" prop="password">
                    <el-input v-model="forms.password"/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <el-form :model="forms" label-width="auto" :rules="rules" ref="formsRef" v-else>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="复用账号" prop="multiplex">
                    <el-switch v-model="forms.multiplex" active-text="配置与开发环境相同"
                               :active-value="1"
                               :inactive-value="0"/>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <el-form-item label="数据库名" prop="name">
                    <el-input v-model="forms.name"/>
                    <span class="zc-description">{{ env.label }}数据库名称最好_{{ env.value }}结尾来区分。</span>
                </el-form-item>
            </el-col>
        </el-row>
        <div v-if="forms.multiplex===0">
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="数据库类型" prop="type">
                        <el-select
                                v-model="forms.type"
                                placeholder="请选择数据库类"
                        >
                            <el-option
                                    v-for="item in dictionary.dbType"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            />
                        </el-select>
                        <span class="zc-description">{{ env.label }}数据库名称最好_{{ env.value }}结尾来区分。</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="数据库地址" prop="host">
                        <el-input v-model="forms.host"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="数据库端口" prop="port">
                        <el-input v-model="forms.port"/>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="12">
                    <el-form-item label="用户名" prop="username">
                        <el-input v-model="forms.username"/>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="forms.password"/>
                    </el-form-item>
                </el-col>
            </el-row>
        </div>
    </el-form>
</template>
<script type="ts" setup>
import {onMounted, reactive, ref} from "vue";
import {dictionary} from "@/utils/core/store";

const formsRef = ref();
const props = defineProps({
    env: {}
})
const forms = reactive({
    host: '',
    port: '',
    username: '',
    password: '',
    type: '',
    name: '',
    multiplex: props.env.value === 'dev' ? 0 : 1

})

const rules = reactive({
    type: [
        {required: true, message: '请输入数据库地址', trigger: 'blur'}
    ],
    name: [
        {required: true, message: '请输入数据库地址', trigger: 'blur'}
    ],
    host: [
        {required: true, message: '请输入数据库地址', trigger: 'blur'}
    ],
    port: [
        {required: true, message: '请输入数据库端口', trigger: 'blur'}
    ],
    username: [
        {required: true, message: '请输入数据库地址', trigger: 'blur'}
    ],
    password: [
        {required: true, message: '请输入数据库端口', trigger: 'blur'}
    ]
})

const doSubmit = async () => {
    return await formsRef.value.validate((valid) => {
        return valid;
    })
}


onMounted(() => {
})
const exposed = {
    doSubmit,
    forms
};
defineExpose(exposed);
</script>
